// import { nextTick, unref } from 'vue'
import NProgress from 'nprogress'
import '@/assets/css/nprogress.scss'
// import { useCssVar } from '@vueuse/core'

// const primaryColor = useCssVar('--el-color-primary', document.documentElement)

export const useNProgress = () => {
  NProgress.configure({ showSpinner: false })

  // const initColor = async () => {
  //   await nextTick()
  //   const bar = document.getElementById('nprogress')?.getElementsByClassName('bar')[0]
  //   const peg = document.getElementById('nprogress')?.getElementsByClassName('peg')[0]
  //   if (bar) {
  //     bar.style.background = unref(primaryColor)
  //   }
  //   if (peg) {
  //     peg.style.boxShadow = `0 0 10px ${unref(primaryColor)}, 0 0 5px ${unref(primaryColor)}`
  //   }
  // }

  const start = () => {
    NProgress.start()
  }

  const done = () => {
    NProgress.done()
  }

  return {
    // initColor,
    start,
    done
  }
}
